<template>
    <div class="patient_card">
        <table class="">
            <tbody>
                <tr>
                    <td ><span>患者姓名</span>：</td>
                    <td class="patient_name" colspan="2">
                        <span>{{PatientInfoData.patientUsername}}</span>
                        <span class="danger_p">(HIV)</span>
                        <p>(男，18岁)</p>
                    </td>
                    <td>
                        <span>手术医生</span>：
                    </td>
                    <td  class="patient_name" >
                        <span>{{PatientInfoData.operatingDoctorUsername}}</span>
                    </td>
                    <td >
                        <span>手术部位</span>：
                    </td>
                    <td  class="patient_name" colspan="2">
                        {{operations.name}}
                    </td>
                    
                </tr>
                <tr>
                    <td >
                         <span>主索引</span>：
                    </td>
                    <td class="patient_name">
                        
                    </td>
                    <td >
                         <span>病区</span>：
                    </td>
                    <td></td>
                    <td >
                        <span>床号</span>：
                    </td>
                    <td></td>
                    <td>
                        <span>费别</span>：
                    </td>
                    <td>
                       {{PatientInfoData.expenseCategoryName}}
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>麻醉医生</span>：
                    </td>
                    <td colspan="3">
                        {{PatientInfoData.anesthesiaDoctorUsername}}
                    </td>
                    <td>
                        <span>助理</span>：
                    </td>
                    <td>
                        {{PatientInfoData.operatingFirstAssistantUsername}}、
                        {{PatientInfoData.operatingSecondAssistantUsername}}、
                        {{PatientInfoData.operatingThirdAssistantUsername}}
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>术前诊断</span>：
                    </td>
                    <td>
                        {{PatientInfoData.diagnosisBeforeOperation}}
                    </td>
                </tr>
                <tr>
                    <td>
                    <span>手术方式</span>：
                    </td>
                    <td>
                    
                    </td>
                </tr>
                <tr>
                    <td>
                    <span>手术史</span>：
                    </td>
                    <td>
                    {{PatientInfoData.operationHistory}}
                    </td>
                </tr>
                <tr>
                    <td>
                    <span>D R</span>：
                    </td>
                    <td>
                    <span></span>
                    </td>
                </tr>
                <tr>
                    <td>
                    <span>心电图</span>：
                    </td>
                    <td>
                    
                    </td>
                </tr>
                <tr>
                    <td>
                    <span>既往史</span>：
                    </td>
                    <td colspan="7">
                    {{PatientInfoData.diseaseHistory}}
                    </td>
                </tr>
            </tbody>
            <tfoot>
               
                    <td>
                     一级核查:
                    </td>
                    <td colspan="2">
                    
                    </td>
                    <td>
                     二级核查:
                    </td>
                    <td colspan="2">
                   
                    </td>
                    <td>
                     三级核查:
                    </td>
                    <td colspan="">
                   
                    </td>
                
            </tfoot>
            <div  class="state">
                <div class="danger">急症</div>
                <div class="warning">感染</div>
            </div>
        </table>
    </div>
</template>

<script lang="ts">
import Component from 'vue-class-component'
import {
    Prop,
    Vue,
    Watch
} from 'vue-property-decorator';


const namespace: string = 'patient';

@Component

export default class PInfo extends Vue {
    @Prop([Array, Object])toPatientInfo!:Array
    @Prop([Array, Object])toOperations!:Array
    
    PatientInfoData:any[]=[];
    operations:any[]=[];

    @Watch('toPatientInfo') 
    ontoPatientInfoChanged(val:Array, oldVal:Array) {
        this.PatientInfoData = val;
    }
 
    @Watch('toOperations') 
    ontoOperationsChanged(val:Array, oldVal:Array) {
      
        this.operations = val[0];
       
    }

    created(){
        
    }

}
</script>

<style lang="scss" scoped>

.patient_card{
    padding:0.1rem;
    background:$color;
    table{
        width:100%;
        //table-layout: auto;
        // word-wrap: break-word;
        // word-break: break-all;
        position:relative;
        tr:first-child,tr:last-child{
             border-bottom:1px solid $table_bolder_color;
        }
        td{
            span{
                width:70px;
                text-align-last: justify;
                display: inline-block;
            }
            text-align:left;
            white-space: nowrap;
            padding: 5px 0;
            &:nth-child(2n-1){
               
            } 
        }
        .state{
            position: absolute;
            text-align:right;
            width: 30px !important;
            right: 0;
            top: 0px;
            div{
                width:30px;
                font-size: $small_p;
                padding: 3px;
                border-radius: 5px;
                margin-bottom: 5px;
                color:$color;
            }
        }
        .patient_name{
            font-size:0.16rem;
            color:$themecolor;
        }
    }
}

</style>